<script setup lang="ts">
import { ref, onMounted } from "vue";
import { ORDER_LIST } from "@/utils/constant/tableColumns";
import OrderDetail from "@/components/order-detail.vue";
const newList = [
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-01 00:00:00",
    status: 1,
    errorMsg: "失败原因失败原因失败",
    type: 1,
    buyerPay: 200,
    serviceFee: 20,
    orderSource: "AAA尖头迈小店",
    orderNo: 212312321,
    deliveryNo: "12312312",
    orderStatus: 1,
  },
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-01 00:00:00",
    status: 1,
    errorMsg: "失败原因失败原因失败",
    type: 1,
    buyerPay: 200,
    serviceFee: 20,
    orderSource: "AAA尖头迈小店",
    orderNo: 212312321,
    deliveryNo: "12312312",
    orderStatus: 1,
  },
  {
    name: "商品标题商品标题商品商品标题商品标题商品标题商品商品标题",
    jdId: "343367458493",
    ttId: "",
    moduleName: "模板名称",
    createTime: "2023-01-02 00:00:00",
    status: 1,
    errorMsg: "失败原因失败原因失败",
    type: 1,
    buyerPay: 200,
    serviceFee: 20,
    orderSource: "AAA尖头迈小店",
    orderNo: 212312321,
    deliveryNo: "12312312",
    orderStatus: 1,
  },
];

const pool_list = ref([]);
const productStatus = ref("0");
const openOdDetail = ref(false);

onMounted(() => {
  pool_list.value = newList.reduce((acc, current) => {
    // 检查是否已存在相同 createTime 的分组
    const existingGroup = acc.find(
      (item) => item.createTime === current.createTime
    );

    if (existingGroup) {
      // 如果已存在，则添加到 list
      existingGroup.list.push(current);
    } else {
      // 如果不存在，则新建分组
      acc.push({
        key: current.createTime,
        createTime: current.createTime,
        orderSource: current.orderSource,
        list: [current],
      });
    }

    return acc;
  }, []);

  console.log(pool_list.value, 223232);
});

const params = ref({
  dateRange: [],
});
</script>

<template>
  <div>
    <a-row mb-16px>
      <a-range-picker v-model:value="params.dateRange" />
      <a-input ml-16px w-220px placeholder="输入订单号/运单号搜索"></a-input>
      <a-select ml-16px w-220px placeholder="店铺筛选（默认全部）"></a-select>
      <a-button ml-16px type="primary">查询</a-button>
    </a-row>
    <a-radio-group v-model:value="productStatus">
      <a-radio-button value="0">全部</a-radio-button>
      <a-radio-button value="1">待发货</a-radio-button>
      <a-radio-button value="2">已发货</a-radio-button>
      <a-radio-button value="3">仅退款</a-radio-button>
      <a-radio-button value="4">退货退款</a-radio-button>
    </a-radio-group>
  </div>

  <a-table v-if="pool_list.length > 0" class="mt-16px" rowClassName="arr-bg" :columns="ORDER_LIST"
    :data-source="pool_list" defaultExpandAllRows>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        下单时间：{{ record.createTime }}
        <a-tag class="ml-10px" v-if="record.list.length > 1" color="processing">多商品</a-tag>
      </template>
    </template>
    <template #expandedRowRender="{ record }">
      <a-table :columns="ORDER_LIST" :data-source="record.list" :pagination="false" :show-header="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'orderSource'">
            <div></div>
          </template>
          <template v-if="column.key === 'orderStatus'">
            <span v-if="record.orderStatus"><a-badge status="success" />已发货</span>
          </template>
          <template v-else-if="column.key === 'operation'">
            <span class="table-operation">
              <a @click="openOdDetail = true">更多信息</a>
            </span>
          </template>
        </template>
      </a-table>
    </template>
  </a-table>
  <OrderDetail v-model:open="openOdDetail"></OrderDetail>
</template>

<style lang="postcss">
.arr-bg {
  background-color: #fafafa;
}
</style>